<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
        <%@ page contentType="text/html;charset=UTF-8" language="java" %>
            <!DOCTYPE html>
            <html xmlns="http://www.w3.org/1999/xhtml">

            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>星月小说网</title>
                <meta name="keywords" content="关键词" />
                <meta name="description" content="网站描述" />
                <meta name="author" content="order by www.adminbuy.cn" />
                <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/index-1.css" />
                <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/index-2.css" />
                <script type="text/javascript" src="${pageContext.request.contextPath}/static/tool/jquery.js"></script>
                <script src="${pageContext.request.contextPath}/static/js/bookdetails-1.js"></script>

                <style>
                    .pai{
                        width: 50px;

                        height: 10px;
                        float: right;
                        margin-top: 15px;
                    }
                    .lunbotu {
                        height: 354px;
                        width: 1050px;
                        /* border: 1px solid black; */
                        margin: 3% 16%;
                        overflow: hidden;
                    }
                    
                    .picture1 {
                        float: left;
                    }
                    
                    .picture2 {
                        float: left;
                    }
                    
                    .picture3 {
                        float: left;
                    }
                    
                    .picture4 {
                        float: left;
                    }
                    
                    .font {
                        height: 74px;
                        width: 175px;
                        font-size: 42px;
                        line-height: 74px;
                        /* border: 1px solid black; */
                    }
                    
                    .cover {
                        height: 100%;
                        width: 100%;
                        background-color: rgba(14, 13, 13, 0.651);
                        position: absolute;
                        top: 0;
                        display: none;
                    }
                </style>

            </head>

            <body>
                <!-- 
        a排行榜,查询，书架
    推荐栏模块：主页的滚动展示，管理员手动设置，图片是管理员上传。推荐栏在主页（三个栏位） -->
                <div class="pb-container">
                    <div class="pb-container-main pb-after-clear">

                        <!-- 公共头部 -->
                        <jsp:include page="common/head.jsp"></jsp:include>
                        <div class="lunbotu">
                            <c:forEach items="${sessionScope.lb}" var="lb" varStatus="st">
                                <a href="${pageContext.request.contextPath}/guest/book/${lb.novelId}/1">
                                    <img src="${pageContext.request.contextPath}/static/images/lb/${lb.lbName}" alt="图片1" class="picture${st.index+1}">
                                </a>
                            </c:forEach>
<%--                                        <img src="${pageContext.request.contextPath}/static/images/1-1F2222255120-L.jpg" alt="图片1" class="picture1">--%>
<%--                                        <img src="${pageContext.request.contextPath}/static/images/lb/1-1F2222254460-L.jpg" alt="图片2" class="picture2">--%>
<%--                                        <img src="${pageContext.request.contextPath}/static/images/lb/1-1F2222254460-L.jpg" alt="图片3" class="picture3">--%>
<%--                                        <img src="${pageContext.request.contextPath}/static/images/lb/1-1F2222254460-L.jpg" alt="图片4" class="picture4">--%>
                        </div>

                        <!-- 当前页面内容 -->
                        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/index-3.css" />
                        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/index-4.css" />
                        <div class="pb-main pb-mt10">
                            <div id="bSlideBox" class="pb-main slideBox">
                                <ul class="items">
                                    <li>
                                        <a target="_blank" href="#"><img src="${pageContext.request.contextPath}/static/images/logo.png" alt="" /></a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="#"><img src="${pageContext.request.contextPath}/static/images/logo.png" alt="" /></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- <script>
                $(document).ready(function() {
                    $('#bSlideBox').slideBox({
                        duration: 0.7,
                        //direction : 'top',
                        easing: 'linear',
                        delay: 5,
                        hideClickBar: true,
                        clickBarRadius: 10
                    });
                });
            </script> -->
                        <div style="clear:both;"></div>
                        <div class="pb-main pb-mt20">
                            <h3 class="idx-t1"> <a href="/a/yxwz/" class="pb-clr1" style="color: black;">推荐</a> </h3>
                            <div class="idx-line1"> </div>
                            <div class="idx-ycwz-1 pb-mt20 pb-after-clear">

                                <div class="pb-iblock pb-fl d1">
                                    <h4>最新小说：</h4>
                                    <div class="pb-line2 pb-mt5" style="border:0;"> </div>
                                    <ul>
                                        <li class="pb-mt20">
                                            <img src="${pageContext.request.contextPath}/static/images/b_jxed_l2.jpg" class="pb-fl idx-ycwz-yxwz2" alt="我的新大明帝国" />我的新大明帝国
                                            <p class="pb-iblock">这天，林凡和圣女同时穿越，深夜的大雨就瓢泼而下，洗礼着猎人的肩膀和他</p>
                                        </li>
                                        <li class="pb-mt20">
                                            <img src="${pageContext.request.contextPath}/static/images/1FT4DO-0.jpg" class="pb-fl idx-ycwz-yxwz2" alt="我从凡间来" />我从凡间来
                                            <p class="pb-iblock">寂寞是无人相伴的旅程，是没有星光的夜空，2020年穿越到这座城市的刘雨，一心只想吃。</p>
                                        </li>
                                        <li class="pb-mt20">
                                            <img src="${pageContext.request.contextPath}/static/images/1FT4DO-0.jpg" class="pb-fl idx-ycwz-yxwz2" alt="一品修仙" />一品修仙
                                            <p class="pb-iblock">【一】 爱情是一丝惆怅，多在云烟里写满甜蜜； 张三在地上写下了这句话</p>
                                        </li>

                                    </ul>
                                </div>
                                <!--右侧-->
                                <div class="pb-iblock pb-fr pb-after-clear pb-main-side">
                                    <div class="pb-main-side pb-iblock pb-after-clear pb-fr">
                                        <h6 class="pb-clr1 pb-size-big" style="color: black;">书籍排行榜</h6>
                                        <div class="pb-line2 pb-mt5"> </div>
                                        <ul class="pb-mt10 previous-term pb-size-normal">
                                            <c:forEach items="${ranking}" var="novel">
                                                <li>
                                                    <span>.</span>
                                                    <a href="${pageContext.request.contextPath}/guest/book/${novel.id}/1">
                                                            ${novel.name}
                                                        <div class="pai"><span style="color: red;font-size: 5px" class="glyphicon glyphicon-fire pull-left">${novel.likes}</span></div>
                                                    </a>
                                                    <div class="pb-line2"></div>
                                                </li>
                                            </c:forEach>

                                        </ul>
                                    </div>
                                </div>
                                <!--右侧-->
                            </div>
<%--                            <h3 class="idx-qtsj-t pb-mt50">--%>
<%--                                <div class="inx-qtsj-line pb-fr"></div>--%>
<%--                                <div class="inx-qtsj-line pb-fl"></div>--%>
<%--                                <a href="/a/qtsj/"> <span class="chn" style="color: black;">科幻</span> <br />--%>
<%--                                    <span class="eng">LISTEN TO THE WORLD</span> </a>--%>
<%--                            </h3>--%>
<%--                            <div class="idx-qtsj pb-mt20 pb-after-clear">--%>
<%--                                <ul>--%>
<%--                                    <li>--%>
<%--                                        <a href="/a/qtsj/18.html"> <img src="${pageContext.request.contextPath}/static/images/qing_10001_4f8ce7bfa4_310.jpg" class="pb-block" style="width:200px;" alt="不同的炊烟，一样的气味" /> </a>--%>
<%--                                        <table class="pb-opac70">--%>
<%--                                            <tbody>--%>
<%--                                                <tr>--%>
<%--                                                    <td class="tle">不同的炊烟，一样</td>--%>
<%--                                                    <td class="num">+178</td>--%>
<%--                                                </tr>--%>
<%--                                            </tbody>--%>
<%--                                        </table>--%>
<%--                                    </li>--%>
<%--                                    <li>--%>
<%--                                        <a href="/a/qtsj/17.html"> <img src="${pageContext.request.contextPath}/static/images/qing_9999_578544d87f_310.jpg" class="pb-block" style="width:200px;" alt="无关风月的盛宴" /> </a>--%>
<%--                                        <table class="pb-opac70">--%>
<%--                                            <tbody>--%>
<%--                                                <tr>--%>
<%--                                                    <td class="tle">无关风月的盛宴</td>--%>
<%--                                                    <td class="num">+141</td>--%>
<%--                                                </tr>--%>
<%--                                            </tbody>--%>
<%--                                        </table>--%>
<%--                                    </li>--%>
<%--                                    <li>--%>
<%--                                        <a href="/a/qtsj/16.html"> <img src="${pageContext.request.contextPath}/static/images/qing_10001_7610be26ad_310.jpg" class="pb-block" style="width:200px;" alt="十年之蹉跎" /> </a>--%>
<%--                                        <table class="pb-opac70">--%>
<%--                                            <tbody>--%>
<%--                                                <tr>--%>
<%--                                                    <td class="tle">十年之蹉跎</td>--%>
<%--                                                    <td class="num">+180</td>--%>
<%--                                                </tr>--%>
<%--                                            </tbody>--%>
<%--                                        </table>--%>
<%--                                    </li>--%>
<%--                                    <li>--%>
<%--                                        <a href="/a/qtsj/15.html"> <img src="${pageContext.request.contextPath}/static/images/qing_10001_8b07d372b1_310.jpg" class="pb-block" style="width:200px;" alt="从你家走出来" /> </a>--%>
<%--                                        <table class="pb-opac70">--%>
<%--                                            <tbody>--%>
<%--                                                <tr>--%>
<%--                                                    <td class="tle">从你家走出来</td>--%>
<%--                                                    <td class="num">+81</td>--%>
<%--                                                </tr>--%>
<%--                                            </tbody>--%>
<%--                                        </table>--%>
<%--                                    </li>--%>
<%--                                    <li>--%>
<%--                                        <a href="/a/qtsj/14.html"> <img src="${pageContext.request.contextPath}/static/images/qing_10001_bcf83a76ac_310.jpg" class="pb-block" style="width:200px;" alt="一个人的精彩" /> </a>--%>
<%--                                        <table class="pb-opac70">--%>
<%--                                            <tbody>--%>
<%--                                                <tr>--%>
<%--                                                    <td class="tle">一个人的精彩</td>--%>
<%--                                                    <td class="num">+156</td>--%>
<%--                                                </tr>--%>
<%--                                            </tbody>--%>
<%--                                        </table>--%>
<%--                                    </li>--%>
<%--                                    <li>--%>
<%--                                        <a href="/a/qtsj/13.html"> <img src="${pageContext.request.contextPath}/static/images/qing_10001_5502d62ca8_310.jpg" class="pb-block" style="width:200px;" alt="守护生命" /> </a>--%>
<%--                                        <table class="pb-opac70">--%>
<%--                                            <tbody>--%>
<%--                                                <tr>--%>
<%--                                                    <td class="tle">守护生命</td>--%>
<%--                                                    <td class="num">+73</td>--%>
<%--                                                </tr>--%>
<%--                                            </tbody>--%>
<%--                                        </table>--%>
<%--                                    </li>--%>
<%--                                    <li>--%>
<%--                                        <a href="/a/qtsj/12.html"> <img src="${pageContext.request.contextPath}/static/images/qing_10001_3f5af7636f_310.jpg" class="pb-block" style="width:200px;" alt="五月花开花亦落" /> </a>--%>
<%--                                        <table class="pb-opac70">--%>
<%--                                            <tbody>--%>
<%--                                                <tr>--%>
<%--                                                    <td class="tle">五月花开花亦落</td>--%>
<%--                                                    <td class="num">+200</td>--%>
<%--                                                </tr>--%>
<%--                                            </tbody>--%>
<%--                                        </table>--%>
<%--                                    </li>--%>
<%--                                    <li>--%>
<%--                                        <a href="/a/qtsj/11.html"> <img src="${pageContext.request.contextPath}/static/images/qing_9999_6963913fb8_310.jpg" class="pb-block" style="width:200px;" alt="我偷走了自己的梦想" /> </a>--%>
<%--                                        <table class="pb-opac70">--%>
<%--                                            <tbody>--%>
<%--                                                <tr>--%>
<%--                                                    <td class="tle">我偷走了自己的梦</td>--%>
<%--                                                    <td class="num">+173</td>--%>
<%--                                                </tr>--%>
<%--                                            </tbody>--%>
<%--                                        </table>--%>
<%--                                    </li>--%>
<%--                                    <li>--%>
<%--                                        <a href="/a/qtsj/10.html"> <img src="${pageContext.request.contextPath}/static/images/qing_10001_2278c48f96_310.jpg" class="pb-block" style="width:200px;" alt="你不懂她，她不孤独" /> </a>--%>
<%--                                        <table class="pb-opac70">--%>
<%--                                            <tbody>--%>
<%--                                                <tr>--%>
<%--                                                    <td class="tle">你不懂她，她不孤</td>--%>
<%--                                                    <td class="num">+53</td>--%>
<%--                                                </tr>--%>
<%--                                            </tbody>--%>
<%--                                        </table>--%>
<%--                                    </li>--%>
<%--                                    <li>--%>
<%--                                        <a href="/a/qtsj/9.html"> <img src="${pageContext.request.contextPath}/static/images/qing_10001_7b053ee001_310.jpg" class="pb-block" style="width:200px;" alt="时光，请放缓你的脚步" /> </a>--%>
<%--                                        <table class="pb-opac70">--%>
<%--                                            <tbody>--%>
<%--                                                <tr>--%>
<%--                                                    <td class="tle">时光，请放缓你的</td>--%>
<%--                                                    <td class="num">+118</td>--%>
<%--                                                </tr>--%>
<%--                                            </tbody>--%>
<%--                                        </table>--%>
<%--                                    </li>--%>

<%--                                </ul>--%>
<%--                            </div>--%>
<%--                            <div style="clear:both;"></div>--%>
<%--                            <h3 class="idx-t1 pb-mt50"> <a href="/a/mryx/" class="pb-clr1" style="color: black;">武侠</a> </h3>--%>
<%--                            <div class="idx-line1"> </div>--%>
<%--                            <div class="idx-mryx pb-mt20 pb-after-clear">--%>
<%--                                <div class="d1 pb-fl"> <img src="${pageContext.request.contextPath}/static/images/b_smile_left.jpg" class="pb-fl" alt="" /> <a href="/a/mryx/" class="tle pb-fl pb-clr1">搞笑段子&nbsp;&nbsp;|&nbsp;&nbsp; <span class="pb-clr2">更多</span></a>--%>
<%--                                    <ul class="pb-mt15 pb-fl pb-size-normal">--%>
<%--                                        <li> <span>.</span> <a href="/a/mryx/24.html">爆损,能把有些人气冒烟儿</a> </li>--%>
<%--                                        <li> <span>.</span> <a href="/a/mryx/23.html">爆逗老师和二货学生</a> </li>--%>
<%--                                        <li> <span>.</span> <a href="/a/mryx/22.html">二货的情人节笑话段子</a> </li>--%>
<%--                                        <li> <span>.</span> <a href="/a/mryx/21.html">逗B与手机的搞笑段子</a> </li>--%>
<%--                                        <li> <span>.</span> <a href="/a/mryx/20.html">最爱冷笑话,开心还能练大脑</a> </li>--%>
<%--                                        <li> <span>.</span> <a href="/a/mryx/19.html">笑破肚皮的爆笑糗段</a> </li>--%>

<%--                                    </ul>--%>
<%--                                </div>--%>
<%--                                <div class="d1 pb-fl d1-2"> <img src="${pageContext.request.contextPath}/static/images/b_smile_left1.jpg" class="pb-fl" alt="" /> <a href="/a/mryx/" class="tle pb-fl pb-clr1">笑话排行&nbsp;&nbsp;|&nbsp;&nbsp; <span class="pb-clr2">更多</span></a>--%>
<%--                                    <ul class="pb-mt15 pb-fl pb-size-normal">--%>
<%--                                        <li> <span>.</span> <a href="/a/mryx/19.html">笑破肚皮的爆笑糗段</a> </li>--%>
<%--                                        <li> <span>.</span> <a href="/a/mryx/22.html">二货的情人节笑话段子</a> </li>--%>
<%--                                        <li> <span>.</span> <a href="/a/mryx/23.html">爆逗老师和二货学生</a> </li>--%>
<%--                                        <li> <span>.</span> <a href="/a/mryx/21.html">逗B与手机的搞笑段子</a> </li>--%>
<%--                                        <li> <span>.</span> <a href="/a/mryx/20.html">最爱冷笑话,开心还能练大脑</a> </li>--%>
<%--                                        <li> <span>.</span> <a href="/a/mryx/24.html">爆损,能把有些人气冒烟儿</a> </li>--%>

<%--                                    </ul>--%>
<%--                                </div>--%>
<%--                                <div class="d2 pb-fr"> <img class="pb-block" src="${pageContext.request.contextPath}/static/images/b_smile_right.jpg" alt="" />--%>
<%--                                    <table class="pb-mt10">--%>
<%--                                        <tbody>--%>
<%--                                            <tr>--%>
<%--                                                <td><a href="#">盗墓笔记</a></td>--%>
<%--                                                <td><a href="#">盗墓笔记</a></td>--%>
<%--                                                <td><a href="#">盗墓笔记</a></td>--%>
<%--                                            </tr>--%>
<%--                                            <tr>--%>
<%--                                                <td><a href="#">盗墓笔记</a></td>--%>
<%--                                                <td><a href="#">盗墓笔记</a></td>--%>
<%--                                                <td><a href="#">盗墓笔记</a></td>--%>
<%--                                            </tr>--%>
<%--                                        </tbody>--%>
<%--                                    </table>--%>
<%--                                </div>--%>
<%--                            </div>--%>
<%--                            <div style="clear:both;"></div>--%>
<%--                            <h3 class="idx-t1 pb-mt50"> <a href="/a/jxed/" class="pb-clr1" style="color: black;">仙侠</a> </h3>--%>
<%--                            <div class="idx-line1"> </div>--%>
<%--                            <div class="idx-jxed pb-mt20 pb-after-clear">--%>
<%--                                <div class="pb-fl d1">--%>
<%--                                    <ul>--%>
<%--                                        <li> <img class="pb-fl" src="${pageContext.request.contextPath}/static/images/1K359CK-2.jpg" alt="是谁在我心底滞留幻化成伤" />--%>
<%--                                            <dl class="pb-fl">--%>
<%--                                                <dt> <a href="/a/jxed/25.html" style="color: brown;">是谁在我心底滞留幻化成伤</a> </dt>--%>
<%--                                                <dd class="cnt"> 导读 : 夜漫长，心未央，千回百转愁断肠！爱无期，情几许，蓦然回首伤别离！就这样不声不响的失去了联系，我也没有勇气... </dd>--%>
<%--                                            </dl>--%>
<%--                                        </li>--%>
<%--                                        <li> <img class="pb-fl" src="${pageContext.request.contextPath}/static/images/b_jxed_l2.jpg" alt="我的时间观念" />--%>
<%--                                            <dl class="pb-fl">--%>
<%--                                                <dt> <a href="/a/jxed/26.html" style="color: brown;">我的时间观念</a> </dt>--%>
<%--                                                <dd class="cnt"> 每天早午晚去游泳，具体时间都基本是在饭后，有事早点，有时晚点，最近的下水游泳时间一般都在30分钟左右。饭后去游泳... </dd>--%>
<%--                                            </dl>--%>
<%--                                        </li>--%>

<%--                                    </ul>--%>
<%--                                </div>--%>
<%--                                <div class="d2 pb-fr">--%>
<%--                                    <dl>--%>
<%--                                        <dt> <a href="javascript:;"> <img src="${pageContext.request.contextPath}/static/images/post_10001_c1be1e419b.jpg" alt="" /> </a> </dt>--%>
<%--                                        <dd class="term pb-size-big" style="color: brown;"> 第二期 </dd>--%>
<%--                                        <dd class="tle"> <a href="javascript:;">第二期：回首这匆匆十年</a> </dd>--%>
<%--                                    </dl>--%>
<%--                                </div>--%>
<%--                            </div>--%>

<%--                        </div>--%>
<%--                        <shiro:hasRole name="admin">--%>
<%--                            <a href="#">你好</a>--%>
<%--                        </shiro:hasRole>--%>
<%--                        <!-- 当前页面内容结束 -->--%>
<%--                        <!-- 公共尾部 -->--%>

<%--                        <div style="clear:both;"></div>--%>
<%--                        <div class="pb-footer">--%>
<%--                            <div class="pb-footer-wp">--%>
<%--                                <div class="pb-main pb-footer-cnt pb-size-small"> <span class="pb-fl">Copyright &copy; 2020-2020 某某某</span>某某某--%>
<%--&lt;%&ndash;                                    <ul class="pb-fr">&ndash;%&gt;--%>
<%--&lt;%&ndash;                                        <li><a href="/" target="_blank">首页</a></li>&ndash;%&gt;--%>

<%--&lt;%&ndash;                                        <li><a href="/a/yxwz/" target="_blank">科幻</a></li>&ndash;%&gt;--%>

<%--&lt;%&ndash;                                        <li><a href="/a/qtsj/" target="_blank">奇幻</a></li>&ndash;%&gt;--%>

<%--&lt;%&ndash;                                        <li><a href="/a/jxed/" target="_blank">武侠</a></li>&ndash;%&gt;--%>

<%--&lt;%&ndash;                                        <li><a href="/a/mryx/" target="_blank">仙侠</a></li>&ndash;%&gt;--%>

<%--&lt;%&ndash;                                        <li><a href="#" target="_blank">技术支持</a></li>&ndash;%&gt;--%>
<%--&lt;%&ndash;                                    </ul>&ndash;%&gt;--%>
<%--                                </div>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                    </div>--%>
                    <script>
                        var img1 = document.querySelector(".picture1");
                        var img2 = document.querySelector(".picture2");
                        var img3 = document.querySelector(".picture3");
                        var img4 = document.querySelector(".picture4");
                        var i = 0;
                        setInterval("lubo()", 3000); //定时器没过1000毫秒执行该函数一次  
                        function lubo() {
                            if (i == 0) {
                                img1.style.display = "none";
                                i++;
                            } else if (i == 1) {
                                img2.style.display = "none";
                                i++;
                            } else if (i == 2) {
                                img3.style.display = "none";
                                i++;
                            } else {
                                i = 0;
                                img1.style.display = "block";
                                img2.style.display = "block";
                                img3.style.display = "block";

                            }

                        }

                        // var login1 = document.querySelector(".login1");
                        // var cover = document.querySelector(".cover");
                        // login1.addEventListener("click", function() {
                        //     cover.style.display = "block";
                        // });

                        // var display = document.querySelector(".div2-1-1");
                        // display.addEventListener("click", function() {
                        //     cover.style.display = "none";
                        // })
                    </script>
                </div>
            </body>

            </html>